<template>
  <div>
    <el-form ref="form" :model="settleAccountsParam" label-width="80px">
      <el-form-item label="下单商品">
        <el-table ref="multipleTable" :data="cartItemVoList" tooltip-effect="dark" style="width: 100%">
          <el-table-column prop="productId" label="skuId" width="180"></el-table-column>
          <el-table-column prop="productName" label="名称" width="180"></el-table-column>
          <el-table-column prop="productPrice" label="单价" width="180"></el-table-column>
          <el-table-column prop="payNum" label="购买数量" width="180"></el-table-column>
          <el-table-column prop="totalPrice" label="总价" width="180"></el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="收货地址">
        <el-table ref="singleTable" :data="addressVoList" tooltip-effect="dark" style="width: 100%">
          <el-table-column fixed width="55" align="center">
            <template slot-scope="scope">
              <el-radio v-model="settleAccountsParam.addressId " :label="scope.row.id"
                        @change="handleSelectionChange(scope.row)"></el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" width="180"></el-table-column>
          <el-table-column prop="name" label="收货人姓名" width="180"></el-table-column>
          <el-table-column prop="phone" label="电话" width="180"></el-table-column>
          <el-table-column prop="detailAddress" label="详细地址" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.province + scope.row.city + scope.row.region + scope.row.detailAddress }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="优惠券">
        <el-select v-model="settleAccountsParam.couponId" clearable placeholder="请选择" @change="getCouponPrice">
          <el-option
            v-for="item in couponVoList"
            :key="item.id"
            :label="item.couponName"
            :value="item.id"
            :selected="item.status === 1">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div>
      <div>{{ '总数量:' + settleAccountsParam.totalNum }}</div>
      <div>{{ '总价钱:' + settleAccountsParam.totalAmount }}</div>
      <div>{{ '优惠金额:' + settleAccountsParam.couponAmount }}</div>
      <div>{{ '运费:' + settleAccountsParam.freightPrice }}</div>
      <div>{{ '应付:' + (settleAccountsParam.payAmount+settleAccountsParam.freightPrice) }}</div>
    </div>

    <el-button type="primary" @click="goToOrder" plain>下单</el-button>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import {getSettleAccounts} from "@/api/settleAccounts/settleAccounts";
import {createOrder, findCouponSkuIdsVo, findSkuMinPrice} from "@/api/cart/cart";

export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"

    return {
      addressVoList: [],
      couponVoList: [],
      cartItemVoList: [],
      settleAccountsParam: {
        skuIds: '',
        token: '',
        addressId: 0,
        couponId: undefined,
        totalAmount: 0,
        totalPrice: 0,
        payAmount: 0,
        freightPrice: 0,
        couponAmount: 0,
        totalNum: 0
      }
    };
  },
  //计算属性 类似于data概念",
  computed: {},
  //监控data中的数据变化",
  watch: {},
  //方法集合",
  methods: {
    goToOrder(){
      createOrder(this.settleAccountsParam).then(res=>{
        if (res.code == 200){
          this.$message.success("下单成功")
          //跳转到支付页面
          localStorage.setItem("selectOrderToken",res.data)
          this.$router.push({name: 'Payment'});
        }
      })
    },
    getCouponPrice(){
      var computeVo = {
        couponId: this.settleAccountsParam.couponId,
        productList: this.cartItemVoList,
        payNum: this.settleAccountsParam.totalNum
      }
      findCouponSkuIdsVo(computeVo).then(res=>{
        this.$message.warning("计算中......")
        if (res.data){
          this.settleAccountsParam.payAmount = res.data.totalPrice
          this.settleAccountsParam.couponAmount = res.data.couponPrice
        }
      })
    },
    getCouponList() {
      findSkuMinPrice(this.settleAccountsParam.skuIds).then(res => {
        if (res.code == 200){
          this.$message.warning("计算中......")
          this.couponVoList = res.data
          this.couponVoList.forEach(coupon=>{
            if (coupon.status == 1){
              this.settleAccountsParam.couponId = coupon.id
            }
          })
          var computeVo = {
            couponId: this.settleAccountsParam.couponId,
            productList: this.cartItemVoList,
            payNum: this.settleAccountsParam.totalNum
          }
          findCouponSkuIdsVo(computeVo).then(res=>{
            this.$message.success("已为您推荐最适合的优惠券")
            if (res.data){
                this.settleAccountsParam.payAmount = res.data.totalPrice
                this.settleAccountsParam.couponAmount = res.data.couponPrice
            }
          })
        }
      })
    },
    getSettleAccounts() {
      getSettleAccounts(this.settleAccountsParam).then(res => {
        this.addressVoList = res.data.addressVoList
        this.cartItemVoList = res.data.cartItemVoList
        this.settleAccountsParam.totalNum = res.data.payNumber
        this.settleAccountsParam.freightPrice = res.data.freightPrice
        this.settleAccountsParam.payAmount = res.data.payPrice
        this.settleAccountsParam.couponId = res.data.couponId
        this.settleAccountsParam.token = res.data.token
        this.settleAccountsParam.couponAmount = res.data.couponPrice
        this.couponVoList = res.data.couponVoList
        this.$message.success("已为您推荐最适合的优惠券")
        // this.settleAccountsParam.payAmount = this.settleAccountsParam.payAmount +this.settleAccountsParam.freightPrice
      })
    },
    handleSelectionChange(val) {
      this.settleAccountsParam.addressId = val.id
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.settleAccountsParam.totalAmount = localStorage.getItem("totalPrice")
    this.settleAccountsParam.totalPrice = localStorage.getItem("totalPrice")
    this.settleAccountsParam.skuIds =  localStorage.getItem("skuIds")
    this.getSettleAccounts()
    // this.getCouponList()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）",
  mounted() {
  },
  beforeCreate() {
  }, //生命周期 - 创建之前",
  beforeMount() {
  }, //生命周期 - 挂载之前",
  beforeUpdate() {
  }, //生命周期 - 更新之前",
  updated() {
  }, // 生命周期 - 更新之后",
  beforeDestroy() {
  }, // 生命周期 - 销毁之前",
  destroyed() {
  }, // 生命周期 - 销毁完成",
  activated() {
  } // 如果页面有keep-alive缓存功能，这个函数会触发",
};
</script>
<style scoped>

</style>
